<template>

    <div class="regieterContent">

        <mt-header title="" style="background-color:white;">
      <div @click="$router.go(-1)" slot="left">
        <mt-button icon="back" style="color:black;"></mt-button>
      </div>
    </mt-header>

        <div class="registBox">
        <div class="regText">登录 | 注册</div>
    <!-- 手机号 -->
        <div class="userform">
        <div class="userList">
            <input class="input_list"  placeholder="请输入手机号" placeholder-class="inputStyle" v-model="phoneNumber"  maxlength="11"/>
            <img class="quxiao" src="../../assets/imageW/ic_clear.png" mode="widthFix" v-if="phoneNumber"
		@click="clear"/>
        </div>

    <div class="line"></div>
    <!-- 验证码 -->
    <div class="userList">
				<input class="input_list"  placeholder="请输入验证码" placeholder-class="inputStyle"  v-model="code" 
					maxlength="4" />
				<div class="get-code" :style="{'color':getCodeBtnColor} " @click.stop="getCode">{{getCodeText}}</div>
				<!-- 防止时间冒泡 -->
	</div>

    <div class="line"></div>
    </div>
    <!-- 协议提示 -->
    <div class="tip">
        <input type="checkbox" id="checkbox2" v-model="agreeState">
        <div class="tipText" @click="agreeState=!agreeState ? true : false">我已经阅读并同意</div>
        <div class="tipp" @click="$router.push(`/userLetter`)">用户协议</div>
            与
            <div class="tipp" @click="$router.push(`/privacy`)">隐私政策</div>
    </div>
    <!-- 登录按钮 -->
     <div class="sureBox">
        <button class="sure" @click="toLogn">确定</button>
     </div>
   

</div>

    </div>
</template>

<script>
import { Toast } from "mint-ui";
    export default {
        data() {
            return {
                phoneNumber: "",
				code: '',
                listCount:[],
				listLook:[],
				passwd: "",
				getCodeText: '获取验证码',
				getCodeBtnColor: "#EAF9FB",
				getCodeisWaiting: false,
				btnBox: true,
                coded:'1234',
                agreeState: false,
            }
        },
        methods:{
            // 选择用户协议
            // 发送验证码
            getCount() {
				let that = this;
				let count = {
				phone: this.phoneNumber,
					event:'发送验证码',
				}
				this.axios.get('/users/reg',count, "POST").then(res => {
					this.phoneNumber = res.data.phone;
				})
			},
            //清除输入框
			clear() {
				this.phoneNumber = ""
			},

            getCode() {
				if (this.getCodeisWaiting) {
					return;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码是否有误
                let instance = Toast({
                    message: "请填写正确手机号码", 
                    duration: 1000, //持续时间（毫秒），若为 -1 则不会自动关闭  
                });
                    setTimeout(() => {
                        instance.close();
                }, 2000);
			
					return false;
				}
				this.getCodeText = "发送中..." //发送验证码
				this.getCodeisWaiting = true;
				this.getCodeBtnColor = "#D9DDDD" //追加样式，修改颜色
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式
				setTimeout(() => {
                     let instance = Toast({
            message: " 您的验证码为:“2206”", 
            position: "top", 
            duration: 2000,
            className: "addClass", 
          });
					this.setTimer(); //调用定时器方法
				}, 1000)
			},

			//setTimer： 需要每隔一段时间执行一件事的的时候就需要使用SetTimer函数
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#23BBCB";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},

            // 登录
            toLogn() {
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phoneNumber))) { //校验手机号码
                let instance = Toast({
                    message: "请填写正确手机号码", 
                    duration: 1000, //持续时间（毫秒），若为 -1 则不会自动关闭  
                });
                    setTimeout(() => {
                        instance.close();
                }, 2000);
					return false;
				}
				//验证示例验证码，
                if(this.code != 2206){
                    this.$toast({
                        message: "请填写正确的验证码登录", 
                        position: "center", 
                        duration: 1000, //持续时间（毫秒），若为 -1 则不会自动关闭  
                    });
                }
                if(this.code != 2206)return
                if(!this.agreeState){
                    this.$toast({
                        message: "请勾选用户协议", 
                        position: "center", 
                        duration: 2000,
                        className: "addClass", 
                    });
                }else{
                    let parms = `phone=${this.phoneNumber}`
                    this.axios.post('/users/reg',parms).then((res)=>{
                            if(res.data.code == 200){
                                this.$store.commit('Muser',this.phoneNumber)
                                this.$store.commit('Mphone',res.data.data[0].rid)
                                // 跳转我的界面
                                this.$router.go(-1)
                            }
                    });


                }
               

			},
        },
    }
</script>

<style lang="scss" scoped>
    .input_list{
        border: none;
    }
    .regieterContent{
         padding: 1vh 3vh;
        //  background-color:#ECD2F2;
    }
    .regText{
        padding: 100px 0 50px 0;
        box-sizing: border-box;
        color: black;
        font-size: 18px;
        font-weight: 600;
    }
    .userform {
		width: 654rpx;
		height: 416rpx;
		margin: 32rpx auto;
	}
    .userList {
		height: 50px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        box-sizing: border-box;
	}
    .quxiao {
		width: 20px;
		height: 20px;
        // margin-right: 10px;
	}
	.quxiao image {
		width: 100%;
	}
    .line{
		width: 100%;
		height: 1px;
        color: #000;
        background-color:#E8EEEE
    }
    .inputStyle {
		width: 192rpx;
		height: 40rpx;
		color: rgba(193.8, 193.8, 193.8, 1);
		font-size: 28rpx;
		font-weight: 400;
		line-height: 40rpx;
		letter-spacing: 0.6rpx;
	}
    .tip{
        margin: 15px 0;
        display: flex;
        align-items: center;
        letter-spacing: 1.5px;
    }
    .tipText{
        margin-left: 16rpx;
    }
    .sureBox{
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }
    .sure{
        background-color: #00D4B8;
        border-radius: 48px;
        padding: 10px;
        width: 180px;
        height: 48px;
        border: none;
    }
    .get-code {
		width: 168rpx;
		height: 56rpx;
		border-radius: 6px;
		// margin: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #00D4B8;
		font-size: 14px;
		font-weight: 500;
        padding: 6px;
        box-sizing: border-box;
	}
    .sure{
        color:#fff;
        font-size: 18px;
    }
    .tipp{
        color: #1DF3F5;
    }
    .mint-header{
        padding: 0;
    }

</style>